//定义模块
var no1 = {template:'#no1'};
var no2 = {template : '#no2'};
var no3 = {template : '#no3'};
var no4 = {template: '#no4'};
var no5 = {template: '#no5'};
var no6 = {template : '#no6'};
var no7 = {template : '#no7'};
var type = {template : '#type'};
//定义routes
var routes=[
    {
        path : '/', name : 'no1',component : no1,
    },
    {
        path : '/no2',name : 'no2',component : no2,redirect:'/no2/no1/:企业理念/1',
        children : [
            {path : 'no1/:type/:uid',name:'type',component:type},
        ]
    },
    {
        path : '/no3',name : 'no3', component : no3,
        children : [
            {path : 'no4/:type',name:'type',component:type},
        ]
    },
    {
        path : '/no4',name : 'no4',component : no4,redirect:'/no4/no2/:研发团队/1',
        children : [
            {path : 'no2/:type/:uid',name:'type',component:type},
        ]
    },
    {
        path : '/no5',name : 'no5',component : no5,redirect:'/no5/no3/:特效药原理/1',
        children : [
            {path : 'no3/:type/:uid',name:'type',component:type},
        ]
    },
    {
        path : '/no6',name : 'no6',component : no6,
    },
    {
        path : '/no7',name : 'no7',component : no7,
    },
];
//声明router
var router = new VueRouter({
    routes,
});


//关于我们
Vue.component('abouts',{
    template:`
        <el-container>
            <el-aside style="width:100px;">
                <ul>
                    <li v-for="a in arr" style="height:30px;ling-height:30px;">
                        <a :href="a.path" style="color:black;">{{a.title}}</a>
                    </li>
                </ul>
            </el-aside>
            <el-main style="min-height:300px;background:red;color:white;">
                <router-view></router-view>
            </el-main>
        </el-container>
    `,
    data(){
        return{
            arr:[
                {title : '企业理念',path: '#/no2/no1/:企业理念/1'},
                {title : '愿景使命',path: '#/no2/no1/:愿景使命/2'},
                {title : '发展规划',path: '#/no2/no1/:发展规划/3'},
            ]
        }
    }
})
//研发中心
Vue.component('research',{
    template:`
        <el-container>
            <el-aside style="width:100px;">
                <ul>
                    <li v-for="a in arr" style="height:30px;ling-height:30px;">
                        <a :href="a.path" style="color:black;">{{a.title}}</a>
                    </li>
                </ul>
            </el-aside>
            <el-main style="min-height:300px;background:red;color:white;">
                <router-view></router-view>
            </el-main>
        </el-container>
    `,
    data(){
        return{
            arr:[
                {title : '研发团队',path: '#/no4/no2/研发团队/1'},
                {title : '技术力量',path: '#/no4/no2/技术力量/2'},
                {title : '研发展望',path: '#/no4/no2/研发展望/3'},
            ]
        }
    }
});
//特效药品
Vue.component('drug',{
    template:`
        <el-container>
            <el-aside style="width:150px;">
                <ul>
                    <li v-for="a in arr" style="height:30px;ling-height:30px;">
                        <a :href="a.path" style="color:black;">{{a.title}}</a>
                    </li>
                </ul>
            </el-aside>
            <el-main style="min-height:300px;background:red;color:white;">
                <router-view></router-view>
            </el-main>
        </el-container>
    `,
    data(){
        return{
            arr:[
                {title : '特效药原理',path: '#/no5/no3/特效药原理/1'},
                {title : '特效药受众对象',path: '#/no5/no3/特效药受众对象/2'},
                {title : '特效药常见问题',path: '#/no5/no3/特效药常见问题/3'},
            ]
        }
    }
});
//产品中心
Vue.component('product',{
    template:  `
    <el-container>
        <el-aside style="width:150px;">
            <ul>
                <li v-for="a in arr" style="height:30px;ling-height:30px;">
                    <a :href="a.path" style="color:black;">{{a.title}}</a>
                </li>
            </ul>
        </el-aside>
        <el-main style="min-height:300px;background:red;color:white;">
            <router-view></router-view>
        </el-main>
    </el-container>
    `,
    data(){
        return{
            arr : [
                {title : '外用药', path:'#/no3/no4/:外用药',arr : [1,2,3,4]},
                {title : '妇科用药', path:'#/no3/no4/:妇科用药',arr : [1,2,3,4,5]},
                {title : '小儿用药', path:'#/no3/no4/:小儿用药',arr : [1,2,3]},
                {title : '感冒用药', path:'#/no3/no4/:感冒用药',arr : [1,2]},
                {title : '肠胃用药', path:'#/no3/no4/:肠胃用药',arr : [1,2,3]},
            ]
        }
    }
})

new Vue({
    el : '#box',
    router,
    data:{
          activeIndex: '1',
          activeIndex2: '1'
      },
      methods: {
        handleSelect(key, keyPath) {
        //   console.log(key, keyPath);
        }
      }
})